<template>
  <div style="  width: 100%;height: 800px;">
    <div class="box-content1">
    <div style="width:100%;height:50px;border:1px solid  #EFEFEF">
        <button @click="add()" style="width:100px;height:30px;border:none;background:orange;color:white;margin-left:10px;margin-top:10px">+添加用户</button>
    </div>
    <div style="position:absolute;top:260px;left:201px;">
    </div>

    <div  style="width:100%;height:500px;margin-top:15px">
        <table v-if="isTab" style="border:1px solid rgba(221, 221, 221, 1);" width="100%"  border=0 cellspacing="0" align="center">
    <tr style="border-bottom:1px solid rgba(221, 221, 221, 1);height:85px;" >
   
      <td  style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px;">
 
        <span style="display:block;margin-top:40px;   font-weight: 700;font-size:15px">
            <input @keydown="search1" style="position:absolute;top:270px;right:100px;width:180px;height:25px" v-model="search" type="text" placeholder="请输入关键字"/>

ID</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:100px">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">用户名称</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">性别</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px">
          <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">注册手机号</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">注册时间</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;    font-weight: 700;font-size:15px">地址</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">等级</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">状态</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">操作</span>

      </td>

    </tr>
    <tr  v-for="item in List1" :key="item.id" style="position:relative">
      <td style="height:55px;border-bottom:1px solid rgba(221, 221, 221, 1);position:relative">
      <span style="display:block;text-align:center;">{{item.id}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)">
        <span style="display:block;text-align:center">{{item.name}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)"><span style="display:block;text-align:center">{{item.sex}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:58px">{{item.number}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:50px">{{item.time}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:54px">{{item.address}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:140px"><span style="display:block;margin-left:50px">{{item.Grade}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:140px"><span style="display:block;margin-left:58px">{{item.state==0?'正常':'禁用'}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)"><span style="display:block;margin-left:70px">
        <button  @click="state1(item)" style="width:55px;height:25px;color:white;background:palevioletred;border:none">禁用</button>
        <button @click="modify(item)" style="width:55px;height:25px;background:#1990FF;border:none;margin-left:10px"><i class="el-icon-edit"></i></button>
        <button @click="del(item)" style="width:55px;height:25px;background:red;border:none;margin-left:10px"><i class="el-icon-delete"></i></button>
        </span></td>
    </tr>
 </table>

 <table v-if="isTab1" style="border:1px solid rgba(221, 221, 221, 1);" width="100%"  border=0 cellspacing="0" align="center">
    <tr style="border-bottom:1px solid rgba(221, 221, 221, 1);height:85px;">
      <td  style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px;">
 
        <span style="display:block;margin-top:40px;   font-weight: 700;font-size:15px">
            <input @keydown="search1" style="position:absolute;top:270px;right:100px;width:180px;height:25px" v-model="search" type="text" placeholder="请输入关键字"/>

ID</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:100px">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">用户名称</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">性别</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;width:180px">
          <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">注册手机号</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">注册时间</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;    font-weight: 700;font-size:15px">地址</span>
      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">等级</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">状态</span>

      </td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);height:45px;text-align:center;">
        <span style="display:block;margin-top:40px;font-weight: 700;font-size:15px">操作</span>

      </td>

    </tr>
    <tr  v-for="item in search2" :key="item.id" style="position:relative">
      <td style="height:55px;border-bottom:1px solid rgba(221, 221, 221, 1);position:relative">
      <span style="display:block;text-align:center;">{{item.id}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)">
        <span style="display:block;text-align:center">{{item.name}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)"><span style="display:block;text-align:center">{{item.sex}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:58px">{{item.number}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:10px">{{item.time}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:180px"><span style="display:block;margin-left:54px">{{item.address}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:140px"><span style="display:block;margin-left:10px">{{item.Grade}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1);width:140px"><span style="display:block;margin-left:58px">{{item.state==0?'正常':'禁用'}}</span></td>
      <td style="border-bottom:1px solid rgba(221, 221, 221, 1)"><span style="display:block;margin-left:10px">
        <button></button>
        </span></td>

    </tr>
 </table>




 <div v-if="bottom" class="table-bottom"  style="display:flex">
    <div style="width:30%" class="table-left">
    </div>
    <div  style="width:70%;" class="table-right">
      <el-pagination
      style="margin-left:60%;margin-top:2%"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[ 10, 20]"
      :page-size="5"
      :total="List.length"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    </div>
</div>
 </div>
 <!-- 遮罩 -->
 <div   class='popContainer' v-if="zhe" >       
  <div class="popContainer-box1" style="  position: relative;  ">
    <div style="width:100%;height:40px;background:#BBBBBB;display:flex;    justify-content: space-between;" class="popContainer-box-top">
                      <span style="font-size:14px;display:block;margin-left:20px;margin-top:10px;">添加用户</span>
                      <span @click="cancel()" style="font-size:20px;display:block;margin-right:20px;margin-top:8px">❌</span>
                    </div> 
  
  <div class="zhe">
    <div style="width:50%;height:100%;margin:0 auto;">
      <div style="width:100%;height:150px"></div>
    <div><span style="font-weight:700;font-size:15px;">用户名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="name" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">性别:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="sex" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:-15px">注册手机号:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="number" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">地址:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="di" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">等级:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="deng" type="text" /></div>
    <button @click="que1()" style="width:80px;height:30px;margin-left:30px;margin-top:50px">确定</button>
    <button @click="cong()" style="width:80px;height:30px;margin-left:40px;">重置</button>

    </div>
  </div>
                   </div>
                    </div>
 
 <!-- 遮罩 -->

 <div   class='popContainer' v-if="zhe1" >       
  <div class="popContainer-box1" style="  position: relative;  ">
    <div style="width:100%;height:40px;background:#BBBBBB;display:flex;    justify-content: space-between;" class="popContainer-box-top">
                      <span style="font-size:14px;display:block;margin-left:20px;margin-top:10px;">添加用户</span>
                      <span @click="cancel1()" style="font-size:20px;display:block;margin-right:20px;margin-top:8px">❌</span>
                    </div> 
  
  <div class="zhe">
    <div style="width:50%;height:100%;margin:0 auto;">
      <div style="width:100%;height:150px"></div>
    <div><span style="font-weight:700;font-size:15px;">用户名称:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="data.name" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">性别:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="data.sex" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:-15px">注册手机号:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="data.number" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">地址:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="data.address" type="text" /></div>
    <div style="width:100%;height:10px"></div>
    <div><span style="font-weight:700;font-size:15px;margin-left:30px">等级:&nbsp;&nbsp;&nbsp;&nbsp;</span><input v-model="data.Grade" type="text" /></div> 
   

    <button @click="que()" style="width:80px;height:30px;margin-left:30px;margin-top:50px">确定</button>
    <button @click="cong()" style="width:80px;height:30px;margin-left:40px;">重置</button>

    </div>
  </div>
                   </div>
                    </div>



    </div>

    </div>
</template>

<script>
import {getbiao,addbiao,upbiao,delbiao} from '../../api/index'
export default {
props:['faMsg'],
data(){
    return{
        value:'',
        value1:'',
        List:[],
        List1:[],
        pageNum: 10, // 每页页数
        size:1,
      currentPage4: 1,
      search:'',
      search2:[],
      isTab:true,
      isTab1:false,
      bottom:true,
      timeList:[],
      isTime1:false,
      isTime:true,
      zhe:false,
      // 添加
      name:'',
      sex:'',
      number:'',
      di:'',
      deng:'',
      zhe1:false,
      data:[]
    }
},
methods:{
  toggleFn(e){
    console.log(e)
  },
    getList(){
        getbiao().then(res=>{
this.List=res.data
this.List.forEach(item=>{
 let a=parseInt(item.time)
//  console.log(a)
      // 时间转换
function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';  
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
}
item.time=timestampToTime(a)
// console.log(item.time)
    })
this.List1=this.List.slice(0,10)
        })
    },
    handleSizeChange(val) {
    this.pageNum = val
    this.List1 = this.List.slice(0,this.pageNum)
      },
      handleCurrentChange(val) {
 this.size = val
 this.List1 = this.List.slice(val * this.pageNum - this.pageNum, val *this.pageNum)
      },
      search1(e){
        if (e.keyCode == 13) {
           this.List.forEach(item=>{
            if(this.search==item.name){
                this.search2.push(item)
                this.isTab=false
                this.isTab1=true
                this.bottom=false
          if(this.search2.length>1){
            this.search2.shift()
          }
        console.log(this.search2)       
             }
           })
      
        }},
        add(){
        this.zhe=true
        },
        cancel(){
          this.zhe=false
        },
        cancel1(){
          this.zhe1=false
        },
        que1(){
          if(this.name!==''&&this.sex!==''&&this.number!==''&&this.di!==''&&this.deng!==''){
            let a={
              name:this.name,
              sex:this.sex,
              number:this.number,
              time:'1665417600000',
              address:this.di,
              Grade:this.deng,
              state:'0'
            }
            addbiao(a).then(res=>{
              this.getList()
              this.zhe=false
            })

          }
        },
        cong(){
          this.data.name=''
          this.data.sex=''
          this.data.number=''
          this.data.address=''
          this.data.Grade=''
        },
        state1(item){
          console.log(item)
          if(item.state==0){
            upbiao({state:1,id:item.id}).then(res=>{
              this.getList()
          })
          }else{
            upbiao({state:0,id:item.id}).then(res=>{
              this.getList()
          })
          }
    
        },
        modify(item){
          this.zhe1=true
          this.data=item
       console.log(this.data)
        },
        que(){
          if(this.data.name!==''||this.data.sex!==''||this.data.number!==''||this.data.address!==''||this.data.Grade!==''){
            upbiao({
          id:this.data.id,
          name:this.data.name,
          sex:this.data.sex,
          number:this.data.number,
          address:this.data.address,
          Grade:this.data.Grade,
        }).then(res=>{
          this.getList()
          this.zhe1=false
        })
        }
          },
          del(item){
            let a=item.id
            delbiao({id:a}).then(res=>{
              this.getList()
            })
          }
},
created(){
    this.getList()
},
watch:{
        // 被侦听的变量count
        search(){
            if(this.search==''){
          this.isTab=true
          this.isTab1=false
            }
        },
        faMsg(){
          if(this.faMsg.length!==0){
            this.List1=this.faMsg
            this.bottom=false
            this.faMsg.forEach(item=>{
 let a=parseInt(item.time)
//  console.log(a)
      // 时间转换
function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';  
        var m = date.getMinutes() + ':';
        var s = date.getSeconds();
        return Y+M+D+h+m+s;
}
item.time=timestampToTime(a)
// console.log(item.time)
    })
          }
        }
  },
}
</script>

<style lang="scss">
.box-content{
  
    .box-content1{
    width: 100%;
    height: 800px;
    margin-top: -40px;
    }
}

.popContainer{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.6);

      .popContainer-box1{
        width: 50%;
        background: white;
        height: 600px;
        margin-left: 30%;
        margin-top:15%;
      }
      .zhe{
        width: 100%;
        height: 559px;
      }
      }
</style>